<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html {
	height: 100%
}
body {
	height: 100%;
	margin: 0;
	padding: 10
}
#map_canvas {
	height: 90%;
	width: 98%;
	border: 1px solid black;
}
</style>
<style type="text/css">
	.cityList{height: 320px;width:372px;overflow-y:auto;}
    .sel_container{font-size:12px;}
    .map_popup {position: absolute;z-index: 200000;width: 382px;height: 344px;top:20px;}
    .map_popup .popup_main { background:#fff;border: 1px solid #8BA4D8;height: 100%;overflow: hidden;position: absolute;width: 100%;z-index: 2;}
    .map_popup .title {background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
    color: #6688CC;font-size: 12px;font-weight: bold;height: 24px;line-height: 25px;padding-left: 7px;}
    .map_popup button {background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
    border: 0 none;cursor: pointer;height: 12px;position: absolute;right: 4px;top: 6px;width: 12px;}
</style>
<script type="text/javascript" src="data.js"></script>
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList.js"></script>
<script type="text/javascript">
//2011-7-25
(function(){        //闭包
function load_script(xyUrl, callback){
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = xyUrl;
    //借鉴了jQuery的script跨域方法
    script.onload = script.onreadystatechange = function(){
        if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
            callback && callback();
            // Handle memory leak in IE
            script.onload = script.onreadystatechange = null;
            if ( head && script.parentNode ) {
                head.removeChild( script );
            }
        }
    };
    // Use insertBefore instead of appendChild  to circumvent an IE6 bug.
    head.insertBefore( script, head.firstChild );
}
function translate(point,type,callback, title){
    var callbackName = 'cbk_' + Math.round(Math.random() * 10000);    //随机函数名
    var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName;
    //动态创建script标签
    load_script(xyUrl);
    BMap.Convertor[callbackName] = function(xyResult){
        delete BMap.Convertor[callbackName];    //调用完需要删除改函数
        var point = new BMap.Point(xyResult.x, xyResult.y);
        callback && callback(point, title);
    }
}

window.BMap = window.BMap || {};
BMap.Convertor = {};
BMap.Convertor.translate = translate;
})();
</script>
<script type="text/javascript">
	var map;
	var center;
	var geoT;
	var disT;
	var currentCity;
	function initialize() {
		map = new BMap.Map('map_canvas');
		center = new BMap.Point(116.404, 39.915);
		currentCity = '北京';
		map.centerAndZoom(center, 12); 
		map.addControl(new BMap.NavigationControl()); 
		map.addControl(new BMap.ScaleControl());  
		map.addControl(new BMap.OverviewMapControl());  
		map.addControl(new BMap.MapTypeControl()); 
		map.setCurrentCity(currentCity); 
		geoT = new BMap.Geocoder();
		disT = new BMapLib.DistanceTool(map);  
		//jingshan 116.403124, 39.931145; dianmen 116.4029, 39.9398;  gulou 116.4023, 39.9470 guloudajie 116.402024, 39.955636
		var centerPoint = new BMap.Point(116.4023, 39.9470);
		map.addOverlay(new BMap.Marker(centerPoint));
		//var circle2 = new BMap.Circle(centerPoint,3400,{fillOpacity:0.001});//dt=3400/2=1700
		//map.addOverlay(circle2);
		//var circle25 = new BMap.Circle(centerPoint,5400,{fillOpacity:0.001});
		//map.addOverlay(circle25);
		var circle3 = new BMap.Circle(centerPoint,7600,{fillOpacity:0.001});//dt=4200
		map.addOverlay(circle3);
		var circle4 = new BMap.Circle(centerPoint,10400,{fillOpacity:0.001});//dt=3800
		map.addOverlay(circle4);
		var circle5 = new BMap.Circle(centerPoint,15400,{fillOpacity:0.001});//dt=5000
		map.addOverlay(circle5);
		var circle55 = new BMap.Circle(centerPoint,20000,{fillOpacity:0.001});
		map.addOverlay(circle55);
		var circle6 = new BMap.Circle(centerPoint,28000,{fillOpacity:0.001});//dt=9600
		map.addOverlay(circle6);
		var pStart3 = new BMap.Point(centerPoint.lng-0.0890,centerPoint.lat+0.0680);
		var pEnd3 = new BMap.Point(centerPoint.lng+0.0890,centerPoint.lat-0.0680);
		var polygon3 = new BMap.Polygon([
			new BMap.Point(pStart3.lng,pStart3.lat),
			new BMap.Point(pEnd3.lng,pStart3.lat),
			new BMap.Point(pEnd3.lng,pEnd3.lat),
			new BMap.Point(pStart3.lng,pEnd3.lat)
		], {strokeColor:'green', fillOpacity:0.1});
		map.addOverlay(polygon3);
		var pStart4 = new BMap.Point(centerPoint.lng-0.1226,centerPoint.lat+0.0935);
		var pEnd4 = new BMap.Point(centerPoint.lng+0.1226,centerPoint.lat-0.0935);
		var polygon4 = new BMap.Polygon([
			new BMap.Point(pStart4.lng,pStart4.lat),
			new BMap.Point(pEnd4.lng,pStart4.lat),
			new BMap.Point(pEnd4.lng,pEnd4.lat),
			new BMap.Point(pStart4.lng,pEnd4.lat)
		], {strokeColor:'green', fillOpacity:0.1});
		map.addOverlay(polygon4);
		var pStart5 = new BMap.Point(centerPoint.lng-0.1806,centerPoint.lat+0.1385);
		var pEnd5 = new BMap.Point(centerPoint.lng+0.1806,centerPoint.lat-0.1385);
		var polygon5 = new BMap.Polygon([
			new BMap.Point(pStart5.lng,pStart5.lat),
			new BMap.Point(pEnd5.lng,pStart5.lat),
			new BMap.Point(pEnd5.lng,pEnd5.lat),
			new BMap.Point(pStart5.lng,pEnd5.lat)
		], {strokeColor:'green', fillOpacity:0.1});
		map.addOverlay(polygon5);
		/*var circle_guomao = new BMap.Circle(new BMap.Point(116.468068,39.923135),10000,{fillOpacity:0.001});
		map.addOverlay(circle_guomao);
		var circle_zhongguancun = new BMap.Circle(new BMap.Point(116.346579,39.982167),10000,{fillOpacity:0.001});
		map.addOverlay(circle_zhongguancun);*/
		function addCircle(center, radius){
			var circle = new BMap.Circle(center,radius,{fillOpacity:0.001});
			map.addOverlay(circle);
		}
		//tianjin yinkoudao=117.203924,39.124456  jinwan=117.2172,39.139415 hepinglu=117.209582,39.131064
		var centerPointTJ = new BMap.Point(117.209582,39.131064);
		map.addOverlay(new BMap.Marker(centerPointTJ));
		//addCircle(centerPointTJ, 5000);
		addCircle(centerPointTJ, 7000);
		addCircle(centerPointTJ, 10000);
		addCircle(centerPointTJ, 15000);
		//shanghai shizhengfu=121.480263,31.23621
		var centerPointSH = new BMap.Point(121.480263,31.23621);
		map.addOverlay(new BMap.Marker(centerPointSH));
		//addCircle(centerPointSH, 5000);
		addCircle(centerPointSH, 7000);
		addCircle(centerPointSH, 10000);
		addCircle(centerPointSH, 15000);
		addCircle(centerPointSH, 20000);
		addCircle(centerPointSH, 30000);
		//nanjing jimingsi=118.804678,32.063754  daxinggong=118.801121,32.047382
		var centerPointNJ = new BMap.Point(118.801121,32.047382);
		map.addOverlay(new BMap.Marker(centerPointNJ));
		//addCircle(centerPointNJ, 5000);
		addCircle(centerPointNJ, 7000);
		addCircle(centerPointNJ, 10000);
		addCircle(centerPointNJ, 15000);
		//hangzhou  chengzhan=120.1876,30.250113
		var centerPointHZ = new BMap.Point(120.1876,30.250113);
		map.addOverlay(new BMap.Marker(centerPointHZ));
		//addCircle(centerPointHZ, 5000);
		addCircle(centerPointHZ, 7000);
		addCircle(centerPointHZ, 10000);
		addCircle(centerPointHZ, 15000);
		//guangzhou guangzhouta=113.331088,23.112174
		var centerPointGZ = new BMap.Point(113.331088,23.112174);
		map.addOverlay(new BMap.Marker(centerPointGZ));
		//addCircle(centerPointGZ, 5000);
		addCircle(centerPointGZ, 7000);
		addCircle(centerPointGZ, 10000);
		addCircle(centerPointGZ, 15000);
		addCircle(centerPointGZ, 20000);
		//shenyang shifuguangchang=123.440671,41.810474  qingniandajie=123.439457,41.797984
		var centerPointSY = new BMap.Point(123.439457,41.797984);
		map.addOverlay(new BMap.Marker(centerPointSY));
		//addCircle(centerPointSY, 5000);
		addCircle(centerPointSY, 7000);
		addCircle(centerPointSY, 10000);
		addCircle(centerPointSY, 15000);
		//wuhan hanjiangkou=114.304786,30.569892
		var centerPointWH = new BMap.Point(114.304786,30.569892);
		map.addOverlay(new BMap.Marker(centerPointWH));
		//addCircle(centerPointWH, 5000);
		addCircle(centerPointWH, 7000);
		addCircle(centerPointWH, 10000);
		addCircle(centerPointWH, 15000);
		addCircle(centerPointWH, 20000);
		//xian shanxishengzhengfu=108.960557,34.271285  zhonglou=108.953502,34.265741
		var centerPointXA = new BMap.Point(108.953502,34.265741);
		map.addOverlay(new BMap.Marker(centerPointXA));
		//addCircle(centerPointXA, 5000);
		addCircle(centerPointXA, 7000);
		addCircle(centerPointXA, 10000);
		addCircle(centerPointXA, 15000);
		//chongqi niujiaotuo=106.54911,29.565169
		var centerPointCQ = new BMap.Point(106.54911,29.565169);
		map.addOverlay(new BMap.Marker(centerPointCQ));
		//addCircle(centerPointCQ, 5000);
		addCircle(centerPointCQ, 7000);
		addCircle(centerPointCQ, 10000);
		addCircle(centerPointCQ, 15000);
		//chengdu tianfuguangchang=104.072206,30.663567
		var centerPointCD = new BMap.Point(104.072206,30.663567);
		map.addOverlay(new BMap.Marker(centerPointCD));
		//addCircle(centerPointCD, 5000);
		addCircle(centerPointCD, 7000);
		addCircle(centerPointCD, 10000);
		addCircle(centerPointCD, 15000);
		//harbin harbinhuochezhan=126.639365,45.76761
		var centerPointHRB = new BMap.Point(126.639365,45.76761);
		map.addOverlay(new BMap.Marker(centerPointHRB));
		//addCircle(centerPointHRB, 5000);
		addCircle(centerPointHRB, 7000);
		addCircle(centerPointHRB, 10000);
		addCircle(centerPointHRB, 13000);
		//jinan nanmen=117.033568,36.668384
		var centerPointJN = new BMap.Point(117.033568,36.668384);
		map.addOverlay(new BMap.Marker(centerPointJN));
		//addCircle(centerPointJN, 5000);
		addCircle(centerPointJN, 7000);
		addCircle(centerPointJN, 10000);
		addCircle(centerPointJN, 13000);
		//zhengzhou jinshuilu=113.688607,34.769423
		var centerPointZZ = new BMap.Point(113.688607,34.769423);
		map.addOverlay(new BMap.Marker(centerPointZZ));
		//addCircle(centerPointZZ, 5000);
		addCircle(centerPointZZ, 7000);
		addCircle(centerPointZZ, 10000);
		addCircle(centerPointZZ, 13000);			
		map.addEventListener("click",function(event){
			document.getElementById("latlng").value = 'lat:' + event.point.lat + ', lng:' + event.point.lng;
		});
	};
	
	window.onload = initialize;

	//坐标转换完之后的回调函数
	translateCallback = function (point, options){
			var icon;
			var marker;
			if(options.icon){
				icon = new BMap.Icon(options.icon, new BMap.Size(32, 32)); 
				marker = new BMap.Marker(point, {icon:icon});
			}
			else{
				marker = new BMap.Marker(point);
			}
			marker.setTitle(options.title);
			if(options.showLabel){
				var label = new BMap.Label(options.title,{offset:new BMap.Size(20,-10)});
				marker.setLabel(label);
			}			
			map.addOverlay(marker); 
	};
	//GCJ-02坐标转成百度坐标
	function translate(ggPoint, options) {
		BMap.Convertor.translate(ggPoint,2,translateCallback, options );
	}
	function handleGeocode(address) {
		if(!address){
			address = document.getElementById("address").value;
		}
		geoT.getPoint( address, function(point) {
			if (point) {
				document.getElementById("latlng").value = 'lat:' + point.lat + ', lng:' + point.lng;
				map.centerAndZoom(point, 15);
				map.addOverlay(new BMap.Marker(point));
			}
		}, currentCity);
	}
	function ShowPositions(positionArray, icon, showLabel, shifted) {
		//map.centerAndZoom(center, 11);
		for(var i=0; i<positionArray.length; i++){
			ShowPosition(positionArray[i], icon, showLabel, shifted);
		}
	}
	function ShowPosition(position, options) {
		if(!position.address) { position.address = ''; }
		if(!position.desc) { position.desc = ''; }
		var title = position.address + ':' + position.name + ':' + position.desc;
		var point =  new BMap.Point(position.lng, position.lat); 
		options = options || '{}';
		if(!options.shifted){
			translate(point, {title:title, icon:options.icon, showLabel:options.showLabel});
		}
		else{
			translateCallback(point, {title:title, icon:options.icon, showLabel:options.showLabel});
		}
	}
	function ShowBoundaries(){
		var showBoundary = function(name, color){
			var bdary = new BMap.Boundary();
			color = color || 'yellow';
			bdary.get(name, function(rs){       //获取行政区域
				//map.clearOverlays();        //清除地图覆盖物       
				var count = rs.boundaries.length; //行政区域的点有多少个
				for(var i = 0; i < count; i++){
					var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: color, fillOpacity:0.01}); //建立多边形覆盖物
					map.addOverlay(ply);  //添加覆盖物
					//map.setViewport(ply.getPath());    //调整视野         
				}                
			});
		}
		showBoundary(currentCity);
		showBoundary('东城区');
		showBoundary('西城区');
		showBoundary('朝阳区');
		showBoundary('海淀区');
		showBoundary('丰台区');
		showBoundary('石景山区');
		showBoundary('通州区', 'yellow');
		showBoundary('大兴区', 'yellow');
		showBoundary('房山区', 'yellow');
		showBoundary('门头沟区', 'yellow');
		showBoundary('昌平区', 'yellow');
		showBoundary('顺义区', 'yellow');
		showBoundary('延庆县', 'yellow');
		showBoundary('怀柔区', 'yellow');
		showBoundary('密云县', 'yellow');
		showBoundary('平谷区', 'yellow');
		showBoundary('天津');
		showBoundary('和平区');
		showBoundary('河西区');
		showBoundary('南开区');
		showBoundary('河东区');
		showBoundary('河北区');
		showBoundary('红桥区');
		showBoundary('滨海新区');
		showBoundary('西青区', 'green');
		showBoundary('津南区', 'green');
		showBoundary('东丽区', 'green');
		showBoundary('北辰区', 'green');
		showBoundary('三河', 'pink');
		showBoundary('大厂', 'pink');
		showBoundary('香河', 'pink');
		showBoundary('秦皇岛市');
		showBoundary('秦皇岛市海港区');
		showBoundary('秦皇岛市山海关区');
		showBoundary('秦皇岛市北戴河区');
		showBoundary('昌黎县');
		showBoundary('抚宁县');
	}
	function ShowCitiesVisited() {
		ShowPositions(citiesVisited, {icon:'blue-dot.png'} );
		ShowPositions(citiesVisited2, {icon:'green-dot.png'} );
		map.setZoom(7);
	}
	function ShowScenes(selectedIndex) {
		switch(selectedIndex){
			case 1: 
				ShowChinaScenes(); 
				break;
			case 2:
				ShowBeijingScenes();
				break;
			case 3:
				ShowChinaScenes2();
				break;
		}
	}
	function ShowChinaScenes() {
		for(var i=0; i<chinaScenes.length; i++){
			var icon = 'green-dot.png';
			if(chinaScenes[i].visited){
				icon = 'blue-dot.png';
			}
			if(!chinaScenes[i].visited){
				ShowPosition(chinaScenes[i], {icon:icon, shifted:true});
			}
		}
		map.setZoom(9);
	}
	function ShowBeijingScenes() {
		for(var i=0; i<beijingScenes.length; i++){
			var icon = 'green-dot.png';
			if(beijingScenes[i].visited){
				icon = 'blue-dot.png';
			}
			if(!beijingScenes[i].visited){
				ShowPosition(beijingScenes[i], {icon:icon, shifted:false});
			}
		}
	}
	function ShowChinaScenes2() {
		for(var i=0; i<chinaScenes2.length; i++){
			var icon = 'green-dot.png';
			if(chinaScenes2[i].visited){
				icon = 'blue-dot.png';
			}
			if(!chinaScenes2[i].visited){
				ShowPosition(chinaScenes2[i], {icon:icon, shifted:false});
			}
		}
	}
	function ShowUnivercities() {
		for(var i=0; i<univercities.length; i++){
			var icon = 'yellow-dot.png';
			if(univercities[i].type=='ben'){
				icon = 'orange-dot.png';
			}
			if(univercities[i].type=='zhuan'){
				icon = 'yellow-dot.png';
			}
			ShowPosition(univercities[i], {icon:icon, shifted:true});
		}
	}
	function ShowHospitals() {
		ShowPositions(hospitals, {icon:'red-dot.png', shifted:true});
	}
	function ShowSchools(){
		ShowPositions(schools1, {icon:'green-dot.png', shifted:true});
		ShowPositions(schools2, {icon:'blue-dot.png', shifted:true});
		ShowPositions(schools3, {icon:'pink-dot.png', shifted:true});
	}
	function ShowCityParks(){
		ShowPositions(cityParks, {shifted:true} );
	}
	function ShowCommunities(){
		ShowPositions(communities, {shifted:true} );
	}
	function Live(){
	    var busLines = new Array();
		var busStations = new Array();
		var numLine = 5;
		var numStation = 5;
		var busLineSearch = new BMap.BusLineSearch(map,{
			renderOptions:{map:map,panel:"r-result"},
			onGetBusListComplete: function(result){
				if(result) {
					var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
					busLineSearch.getBusLine(fstLine);	
				}
			},
			onGetBusLineComplete: function(result){
				if(result) {
					busLines.push(result.getPolyline());
					var numBusStations = result.getNumBusStations();
					for(var i=0; i < numBusStations; i++){
						busStations.push(result.getBusStation(i));
					}
				}				
			},
			onPolylinesSet: function(result){
				numLine--;
				if(numLine == 0){
					for(var i = 0; i < busLines.length; i++){
						map.addOverlay(busLines[i]); 
					}
					ShowPositions(live, '', true, true);
				}
			},
			onMarkersSet: function(result){
				/*numStation--;
				if(numStation == 0){
					for(var i = 0; i < busStations.length; i++){
						map.addOverlay(new BMap.Marker(busStations[i].position)); 
					}
				}*/
			}
		});
		busLineSearch.getBusList(49);
		busLineSearch.getBusList(67);
		busLineSearch.getBusList(351);
		busLineSearch.getBusList(691);
		busLineSearch.getBusList(692);		
		map.setZoom(13);
	}
</script>
</head>
<body onload="initialize()">
	<div class="sel_container"><strong id="curCity">北京市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div>
	<div class="map_popup" id="cityList" style="display:none;">
		<div class="popup_main">
			<div class="title">城市列表</div>
			<div class="cityList" id="citylist_container"></div>
			<button id="popup_close"></button>
		</div>
	</div>
	<div>
		<span style="border: 1px;">
			<input id="address" type="textbox" value="">
			<input type="button" value="Geocode" onclick="handleGeocode()">
			<input id="latlng" type="textbox" value=""> 
		</span>
		<span style="border: 1px;">
			<input type="button" value="Boundaries" onclick="ShowBoundaries()">
		</span>
		<span style="border: 1px;">
			<input type="button" value="CitiesVisited" onclick="ShowCitiesVisited()">
		</span>
		<span style="border: 1px;">
			<select onchange="ShowScenes(this.options.selectedIndex)">
				<option value ="">Scenes...</option>
				<option value ="ChinaScenes">ChinaScenes</option>
				<option value ="BeijingScenes">BeijingScenes</option>
				<option value="ChinaScenes2">ChinaScenes2</option>
			</select>
		</span>
		<span style="border: 1px;">
			<input type="button" value="Univercities" onclick="ShowUnivercities()">
			<input type="button" value="Hospitals" onclick="ShowHospitals()">
			<input type="button" value="Schools" onclick="ShowSchools()">
			<input type="button" value="CityParks" onclick="ShowCityParks()">
		</span>
		<span style="border: 1px;">
			<input type="button" value="Live" onclick="Live()">
			<input type="button" value="Communities" onclick="ShowCommunities()">
			<input type="button" value="开启" onclick="disT.open()" />  
			<input type="button" value="关闭" onclick="disT.close()" />  
		</span>
		<!--<span>
			<b>Start: </b>
			<select id="start" onchange="calcRoute();">
				<option value="beijing beijing">Beijing</option>
				<option value="tianjin, tianjin">Tianjin</option>
			</select> 
			<b>End: </b>
			<select id="end" onchange="calcRoute();">
				<option value="beijing beijing">Beijing</option>
				<option value="tianjin, tianjin">Tianjin</option>
			</select>
		</span>-->
	</div>
	<div style="width: 100%; height: 1%; margin: 0 auto;">
	</div>
	<div id="map_canvas" style="margin: 0 auto;"></div>
	<div id="elevation_chart" style="width: 640px; height: 200px;"></div>
	<div hidden="true">		
	</div>
	<script type="text/javascript" >
		// 创建CityList对象，并放在citylist_container节点内
		var myCl = new BMapLib.CityList({container : "citylist_container", map : map});

		// 给城市点击时，添加相关操作
		myCl.addEventListener("cityclick", function(e) {
			// 修改当前城市显示
			document.getElementById("curCity").innerHTML = e.name;
			currentCity = e.name;
			map.centerAndZoom(currentCity, 11);
			// 点击后隐藏城市列表
			document.getElementById("cityList").style.display = "none";
		});

		// 给“更换城市”链接添加点击操作
		document.getElementById("curCityText").onclick = function() {
			var cl = document.getElementById("cityList");
			if (cl.style.display == "none") {
				cl.style.display = "";
			} else {
				cl.style.display = "none";
			}	
		};

		// 给城市列表上的关闭按钮添加点击操作
		document.getElementById("popup_close").onclick = function() {
			var cl = document.getElementById("cityList");
			if (cl.style.display == "none") {
				cl.style.display = "";
			} else {
				cl.style.display = "none";
			}	
		};
		</script>
</body>
</html>